<template>
    <div class="login" :style="{ background: gradientColor }" @keyup.enter="login()">
        <div class="form">
            <h3>登录</h3>
            <InputGroup>
                <InputGroupAddon>
                    <i class="pi pi-user"></i>
                </InputGroupAddon>
                <InputText placeholder="Username" v-model="username" />
            </InputGroup>
            <InputGroup>
                <InputGroupAddon>
                    <i class="pi pi-lock"></i>
                </InputGroupAddon>
                <InputText placeholder="Password" v-model="password" />
            </InputGroup>
            <Button label="登录" severity="warning" @click="login()" :loading="loading"  />
        </div>
    </div>
    <Toast />
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, computed, getCurrentInstance } from 'vue';

import Toast from 'primevue/toast';
import { useToast } from "primevue/usetoast";
const toast = useToast();

import Button from 'primevue/button';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
import InputText from 'primevue/inputtext';

import axios from 'axios';

const router = useRouter();

const username = ref()
const password = ref()
const loading = ref(false)

const { proxy } = getCurrentInstance()

function login(){
    loading.value = true
    axios.post("https://api.cxkqun.com/index.php/api/query/admin",{
        "auth":"cxkqun",
        "username":username.value,
        "password":password.value
    }, {
  withCredentials: true // 允许携带凭据
}).then(res => {
        loading.value = false
        if(res.data.code === 1){
            proxy.$cookies.set('frontauthtoken', 'qp9iHXwRNAP4VkjfHV3P', '3d')
            router.push("/back")
        }else{
            toast.add({ severity: 'error', summary: '登录失败', detail: '用户名/密码错误', life: 3000 });
        }
    })
}



const colors = ref(['#ff7e5f', '#feb47b', '#ff9d76', '#ff6b6b', '#ff8776', '#ffb77b', '#ffbf86', '#ffda8b', '#ffd86b']);

const gradientColor = computed(() => {
  const randomIndex1 = Math.floor(Math.random() * colors.value.length);
  let randomIndex2 = Math.floor(Math.random() * colors.value.length);
  // 确保两个颜色不相同
  while (randomIndex2 === randomIndex1) {
    randomIndex2 = Math.floor(Math.random() * colors.value.length);
  }
  const color1 = colors.value[randomIndex1];
  const color2 = colors.value[randomIndex2];
  return `linear-gradient(to right, ${color1}, ${color2})`;
});


</script>

<style lang="less" scoped>
.login{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .form{
        width: 300px;
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);
        padding: 0 16px 16px 16px;
        border-radius: 6px;

        &>:nth-child(2){
            margin: 20px 0;
        }
        &>:nth-child(3){
            margin-bottom: 20px;
        }
        h3{
            text-align: center;
        }
        &>button{
            width: 100%;
        }
    }
}
</style>